<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="color = 'blue'">变蓝</button>
           <!-- <div :style="{color: color}">我是div</div> -->

           <!-- 根据es6的对象属性名左右两边一样可以简写 -->
           <!-- <div :style="{color}">我是div</div> -->

           <!-- 多个之间逗号隔开 -->
           <!-- 
                color跟数据color绑定
                fontSize跟数据size绑定

                所以最终文字颜色是红色，字体大小是40px
            -->
           <div :style="{color, fontSize: size}">我是div</div>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                   color: 'red',
                   size: '40px'
                }
            },
            methods:{
                   
            }
        })
    </script>
</body>
</html>